<template>
    <div class="box">
        <div class="box-tit">
            <span>小工具1</span>
        </div>
        <div class="box-tags">
            <button :class="{ 'check': tagName == '离线' }" @click="tagClick('离线')">离线</button>
            <button :class="{ 'check': tagName == '在线' }" @click="tagClick('在线')">在线</button>
        </div>
        <div class="box-content">
            <div class="item" v-for="item in tools" :key="item.title" @click="toolClick(item)">
                {{ item.title }}
            </div>
        </div>

        <main class="main">
            <router-view></router-view>
        </main>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { tools_list } from "@/assets/js/tools.js";
import { computed } from "vue";

const router = useRouter();
const tagName = ref('离线');
const tools = computed(() => tools_list(tagName.value));


const tagClick = (tag) => {
    tagName.value = tag;
};

/**
 * 路由跳转函数
 *
 * @param item 路由跳转的目标信息
 */
const toolClick = (item) => {
    let query = {};
    if (item.type == '在线') query.url = item.url;
    router.push({ name: item.name, query });
};
</script>

<style lang="scss" scoped>
.box {
    max-width: 90%;
    margin: 10px auto 20px;
    padding: 10px;

    &-tit {
        margin-bottom: 10px;

        span {
            font-size: 22px;
            color: hsl(333deg 100% 45%);
        }
    }

    &-tags {
        display: flex;

        button {
            border-radius: 5px;
            font-size: 15px;
            margin-right: 5px;
        }

        .check {
            background-color: rgb(62, 16, 211);
            color: #FFF;
        }
    }

    &-content {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 5px;
        margin-bottom: 10px;

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid hsl(205, 100%, 75%);
            line-height: 35px;
            cursor: pointer;

            &:hover {
                background-color: hsl(205, 100%, 75%);
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .box {
        max-width: 100%;

        &-content {
            margin-top: 10px;
            display: grid;
            grid-template-columns: 1fr;
        }
    }
}

.main {
    width: 100%;
    height: 65vh;
    border: 1px solid #80caffb5;

    &>div {
        width: 100%;
        height: 100%;

        iframe {
            width: 100%;
            height: 100%;
        }
    }
}
</style>